<template>
	<div class="news">
		<!-- 导航区 -->
		<ul>
			<li v-for="news in newsList" :key="news.id">
				<button @click="showNewsDetail(news)">点击查看</button>
				<!-- 第一种写法 -->
				<!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->

				<!-- 第二种写法 -->
				<RouterLink :to="{
					name: 'xiangxi',
					params: {
						id: news.id,
						title: news.title,
						content: news.content
					}
				}">
					{{ news.title }}
				</RouterLink>
			</li>
		</ul>
		<!-- 展示区 -->
		<div class="news-content">
			<RouterView></RouterView>
		</div>
	</div>
</template>

<script setup lang="ts" name="News">
	import { reactive } from "vue"
	import { RouterLink, RouterView, useRouter } from "vue-router"

	const newsList = reactive([
		{ id: 'news01', title: '崩铁速度论', content: '二动阈值为134' },
		{ id: 'news02', title: '遗器强化论', content: '耐心等待吧' },
		{ id: 'news03', title: '格拉默军规', content: '格拉默军规第一条：骑士应为诞生感到荣耀' },
		{ id: 'news04', title: '击破收益论', content: '超击破收益为....' }
	])

	const router = useRouter()

	// 多一个接口做限制
	interface NewsInterface {
		id: string,
		title: string,
		content: string
	}

	function showNewsDetail(news: NewsInterface) {
		router.push({
			name: 'xiangxi',
			params: {
				id: news.id,
				title: news.title,
				content: news.content
			}
		})
	}
</script>

<style scoped>
	.news {
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
	}

	.news ul {
		margin-top: 30px;
		/* list-style: none; */
		padding-left: 10px;
	}

	.news li::marker {
		color: #64967e;
	}

	.news li>a {
		font-size: 18px;
		line-height: 40px;
		text-decoration: none;
		color: #64967e;
		text-shadow: 0 0 1px rgb(0, 84, 0);
	}

	.news-content {
		width: 70%;
		height: 90%;
		border: 1px, solid;
		margin-top: 20px;
		border-radius: 10px;
	}
</style>
